<template>
	<view class="service-call">
		<view class="service-call-list flex-center" style="margin-bottom: 750rpx;">
			<xfl-select 
				:list="serviceList" 
				:clearable="false" 
				:showItemNum="5" 
				:listShow="false" 
				:isCanInput="false" 
				:style_Container="'width: 670rpx;height: 50px; font-size: 16px;'"
				:placeholder="'请选择服务'" 
				:selectHideType="'hideAll'"
				@change="pageTo">
			</xfl-select>
			<!-- <view class="service-call-list-item" v-for="(item, index) in serviceList" :key="index" @click="pageTo(item.url)">
				<image class="service-call-list-item-img" :src="item.icon" mode="aspectFill"></image>
				<view class="service-call-list-item-txt">{{item.value}}</view>
			</view> -->
		</view>
		<comCall></comCall>
	</view>
</template>

<script>
	import comCall from "./Call.vue"
	import uniIcon from "@/components/uni-icon.vue"
	import xflSelect from '../../components/xfl-select/xfl-select.vue';
	export default {
		components: {
			uniIcon,
			comCall,
			xflSelect
		},
		data() {
			return {
				serviceList: [{
						icon: '../../static/images/device-service-install.png',
						value: '申请安装',
						url: 'applyInstall'
					},
					{
						icon: '../../static/images/device-service-repair.png',
						value: '申请维修',
						url: 'applyRepair'
					},
					{
						icon: '../../static/images/device-service-maintenance.png',
						value: '申请保养',
						url: 'applyMaintenance'
					},
					{
						icon: '../../static/images/device-service-move.png',
						value: '申请移机',
						url: 'applyMove'
					},
					{
						icon: '../../static/images/device-service-withdrawal.png',
						value: '申请退租',
						url: 'applyWithdrawal'
					}
				]
			}
		},
		onLoad() {},
		methods: {
			pageTo(item) {
				uni.navigateTo({
					url: item.orignItem.url
				});
			}
		}
	}
</script>

<style lang="scss">
	.service-call {
		&-list {
			padding: 50rpx 40rpx 0;
			flex-wrap: wrap;

			&-item {
				background: $uni-bg-color;
				width: 320rpx;
				height: 270rpx;
				margin-bottom: 30rpx;

				&:nth-child(2n) {
					margin-left: 30rpx;
				}

				&-img {
					width: 72rpx;
					height: 72rpx;
					display: block;
					margin: 60rpx auto 20rpx;
				}

				&-txt {
					font-size: $uni-font-size-lg1;
					color: $uni-text-color-grey2;
					text-align: center;
				}
			}
		}
	}
</style>
